<template>
  <div class="home" v-title data-title="HI!Danmu首页">
    <header-bar></header-bar>
    <div class="home-box">
      <div class="home-top">
        <div class="home-top-left">
          <a-carousel :autoplay="true">
            <div v-for="(item, index) in carousel" :key="index">
              <img class="carousel-img" :src="item.img" @click="go(item.url)"/>
            </div>
          </a-carousel>
        </div>
        <!--推荐视频-->
        <div class="home-top-right">
          <recommend></recommend>
        </div>
      </div>
      <div class="transition">
        <svg t="1628137088593" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2140" width="128" height="128"><path d="M770.25 356.21c-1.52-11.7-6.41-22.33-15.41-30.14-17.19-14.9-43.13-19.55-63.54-8.15a45.09 45.09 0 0 0-8.95 6.67 173.49 173.49 0 0 0-5-37.75 110.18 110.18 0 0 0-12.87-31.29 167.13 167.13 0 0 0-5-75.1 170.43 170.43 0 0 0-6.95-18.45c-2.28-5.2-4.69-13.54-11.6-13.63-2.89 0-5.92 1.2-8.65 2q-5.19 1.63-10.28 3.35-9.53 3.24-18.81 7.13a298.71 298.71 0 0 0-38.93 19.74c-48-11.4-98.3-15.58-147.39-10.7q-9.36 0.93-18.66 2.33c-6.06 0.91-12.14 2.44-18.27 2.77s-11.13-1.62-16.25-5.07c-4.87-3.29-9.56-6.79-14.62-9.79a138.75 138.75 0 0 0-34-14.61c-6.33-1.72-12.7-1.72-18 2.63-4.35 3.6-6.61 9.06-8.84 14.09a275.37 275.37 0 0 0-22 81.7c-14.89 16.71-27.29 36.13-34.32 57.44a111.73 111.73 0 0 0-5 24.19c-23.55-0.84-47.72 7.71-62.34 26.81a58 58 0 0 0-12.07 31.43c-0.75 11.93 3.09 23.55 8.08 34.22s11.4 20.85 16.32 31.67a114.18 114.18 0 0 1 9.23 36.14c2.53 26-1.15 52.15-2.73 78.13-1.44 23.61-0.62 47 5.05 70.07a216.25 216.25 0 0 0 24.47 59 239 239 0 0 0 92.62 88c44.66 23.65 96.14 31.56 146.24 29.33 50.64-2.26 101.46-13.69 149.05-30.92C642.51 764.42 684 742.66 711.59 707c32.58-42 37.65-97.51 39.21-148.85 0.84-27.78 0.5-55.59 2.07-83.34 0.77-13.57 2-27.14 4.1-40.57s5.55-26.76 9-40c3.32-12.4 5.96-25.19 4.28-38.03z" fill="#FFFFFF" p-id="2141"></path><path d="M654.3 424c4.34 8 3.45 21.85-3.06 28.16s-15.41 9.44-24.07 12.16c-120.24 37.85-256.3 39.2-373.49-7.22-2.14-16-2.8-33.16-4.94-49.17 19.78 15.65 45.39 21.58 70.24 25.93A835.5 835.5 0 0 0 654.3 424zM313.23 172.68a149.63 149.63 0 0 0-10.68 47.42 271.26 271.26 0 0 0 40.16-22.52 3.16 3.16 0 0 0 1.6-1.89c0.17-1.08-0.76-2-1.61-2.68q-13.83-11.23-28.61-21.22M629.19 175.32a132.81 132.81 0 0 0-30.09 23.15 2.11 2.11 0 0 0 0.16 3.8l21.26 16.52c5.33 4.14 11.31 8.49 18.05 8.13a136.19 136.19 0 0 0-9.4-51.37" fill="#F26140" p-id="2142"></path><path d="M405.38 304.32c-2.51-4.61-7.49-8-11.56-11.17a108.07 108.07 0 0 0-12.59-8.61c-9-5.13-19-8.57-29.4-9-17.26-0.64-38.58 10.47-39.69 29.61-0.24 4.3 5.71 4.51 7.05 1 2.53-6.68 6.53-12.53 12.68-16.34 6.72-4.16 14.58-5.4 22.39-4.67 8.51 0.79 16.64 4.24 23.87 8.66a99.21 99.21 0 0 1 10.46 7.4c3.57 2.88 7 6.8 11.26 8.63 3.56 1.55 7.6-1.69 5.53-5.51zM574.54 280.37c0.16 0 1.05-0.08 1.32-0.09a24.29 24.29 0 0 1 4.89 0.41 28.35 28.35 0 0 1 9.27 3.4 37.18 37.18 0 0 1 8.4 6.85c2.45 2.61 4.42 5.92 7.74 7.53 2.12 1 5.35-0.16 5.12-2.93-0.59-7.22-8.2-13.41-13.76-17.26a36.08 36.08 0 0 0-21.94-6.54c-10.58 0.59-20.87 7-28.92 13.35a71.38 71.38 0 0 0-18.18 21.65c-1.88 3.42 2.85 5.9 5.1 3 8.1-10.57 18-20.09 30.15-25.85a38.74 38.74 0 0 1 10.81-3.52zM533.92 364.53c-2.91 1.41-5.59 3.24-8.62 4.41a30.33 30.33 0 0 1-9.5 2 35.7 35.7 0 0 1-18.75-4.27c-6.14-3.39-10.8-8.36-15.25-13.68a118.59 118.59 0 0 1-10.47-14.62c2.82-0.93 5.07-2.34 5.38-5 1.12-9.54-22.87-7.56-24.76 1.86-0.71 3.52 3.29 5.32 7.43 5.48-2.1 5-4.11 10.09-7.05 14.77a43.92 43.92 0 0 1-14.82 14.84 32.4 32.4 0 0 1-36.37-2.51c-4.72-3.7-10.75 2-6.69 6.68 11.18 12.92 32.59 12.64 46.6 5.07a49.38 49.38 0 0 0 18.36-17.94c3.48-5.75 6.35-12.53 7.16-19.38C471.92 356 480.4 369.3 493.94 376a45.6 45.6 0 0 0 23.51 4.81c8.21-0.61 17.49-3.32 22.4-10.38 2.68-3.84-2.39-7.61-5.93-5.9zM565 338.25a133.07 133.07 0 0 1 26.7-3.9c9-0.35 17.88 0.58 26.83 0.46 3.19 0 3.65-4.43 0.73-5.42-8.9-3-18.79-3.12-28.08-2.39a119.43 119.43 0 0 0-27.79 5.42c-3.71 1.19-2.21 6.77 1.61 5.83zM626.48 357c-19.59-5.81-41.73-4.31-61.29 1-3.72 1-2.14 6.5 1.59 5.73a139 139 0 0 1 29-2.95c9.69 0.07 19.37 1.32 29 2.64 4.04 0.58 5.94-5.13 1.7-6.42zM279.6 331.7c-3.27 1.59-0.94 6.59 2.41 5.73 12.52-3.21 24.63-2 36.91 1.56 2 0.58 4-2.29 2.17-3.73-11.6-9.26-28.37-9.93-41.49-3.56zM316.85 350.12c-13.12 1.93-26.35 3.6-39.18 7.06-3.22 0.87-2.7 6.35 0.82 6 13.49-1.35 26.71-4.48 39.93-7.38 3.78-0.8 2.09-6.22-1.57-5.68z" fill="#3B3E44" p-id="2143"></path><path d="M700.24779 337.410891l5.692014-0.565129 1.806041 18.190564-5.692014 0.565129-1.806041-18.190564Z" fill="#3B3E44" p-id="2144"></path><path d="M722.424361 334.28912l5.65113 0.884944-2.828106 18.059906-5.65113-0.884943 2.828106-18.059907Z" fill="#3B3E44" p-id="2145"></path><path d="M736.17 361.63a2.85 2.85 0 0 1-1-3.9l6.29-10.88a2.86 2.86 0 0 1 3.91-1.05 2.86 2.86 0 0 1 1 3.91l-6.28 10.87a2.86 2.86 0 0 1-3.92 1.05zM188.79 389a2.87 2.87 0 0 1-4-0.1l-8.65-9.12a2.85 2.85 0 0 1 0.11-4 2.85 2.85 0 0 1 4 0.11l8.66 9.11a2.85 2.85 0 0 1-0.12 4zM201.07 376.24a2.87 2.87 0 0 1-3.89-1.12l-6.07-11a2.86 2.86 0 0 1 1.12-3.89 2.86 2.86 0 0 1 3.89 1.13l6.07 11a2.86 2.86 0 0 1-1.12 3.88z" fill="#3B3E44" p-id="2146"></path><path d="M212.06387 357.03482l5.667213-0.775304 2.47772 18.111303-5.667213 0.775304-2.47772-18.111303Z" fill="#3B3E44" p-id="2147"></path><path d="M404.27 626c-3.47 3-17.29 19.46-20.61 24.31 4.94-3.17 25.41-11.86 28.88-14.91s4.44-7.63 2.15-10.22-6.95-2.27-10.42 0.82zM410.43 656.46c-2.83 0.39-17.16 5.94-20.73 7.18 3.65 0.45 19 0.85 21.79 0.46s4.88-2.43 4.58-4.54-2.82-3.5-5.64-3.1zM380.37 620.23c-1.18 3.33-3.9 19.52-4.24 24.06 2.35-3.2 12.1-17.54 13.28-20.87s0.11-6.74-2.38-7.63-5.48 1.11-6.66 4.44zM298.06 674.53c-1.87-11.32-2.14-30.27 1.86-41 1.17-3.17 5.23-7.44 8.54-8.11s6.67 2.08 7.81 5.32 0.68 6.79 0.2 10.19c2.85-2.17 5.84-4.41 9.37-5s7.73 0.94 8.85 4.34-1.34 8.87-3.79 11.42c-9.6 9.93-24.1 12.08-32.84 22.84zM293.34 674.68c-10.85-3.79-27.63-12.64-35.17-21.31-2.22-2.55-4-8.15-3-11.37s5-4.85 8.42-4.3 6.29 2.67 9.05 4.72c-0.54-3.54-1.07-7.24 0.07-10.63s4.53-6.32 8.06-5.67 7.15 5.43 8.21 8.79c4.16 13.21-0.91 26.95 4.36 39.77zM295.83 677.25c-7.42 8.69-21.71 20.93-32.55 24.53-3.19 1.06-9.12 0.51-11.81-1.73s-2.8-6.69-1.07-9.66 4.74-4.86 7.65-6.63c-3.53-0.91-7.21-1.91-10-4.35s-4.36-6.82-2.5-9.88 7.66-4.54 11.21-4.19c13.94 1.39 25.11 11.66 39.07 11.91zM297.21 676.4c6.66 9.36 15.23 26.27 16.36 37.69 0.34 3.36-1.43 9-4.11 11s-6.91 1-9.36-1.36-3.59-5.81-4.65-9.08c-1.61 3.2-3.32 6.53-6.21 8.64s-7.36 2.54-9.86 0-2.69-8.56-1.61-11.91c4.23-13.19 16.32-21.47 19.44-34.98zM299.42 674.59c11.35-1.82 30.33-2 41.09 2 3.16 1.19 7.43 5.26 8.09 8.57s-2.11 6.64-5.36 7.77-6.81 0.65-10.21 0.16c2.17 2.85 4.4 5.85 5 9.38s-1 7.72-4.38 8.82-8.88-1.38-11.42-3.83c-9.97-9.61-12.06-24.1-22.81-32.87zM343.23 576.47c1.11-4.6 4-11.85 7.31-15.3a6.07 6.07 0 0 1 4.55-1.72 3.07 3.07 0 0 1 2.11 3.28 8.89 8.89 0 0 1-1.56 3.91 9.33 9.33 0 0 1 4.37-0.41 3.2 3.2 0 0 1 2.67 3.06c-0.12 1.46-1.94 3.16-3.28 3.74-5.26 2.26-11.12 0.75-16.17 3.44zM341.41 575.77c-3.51-3.18-8.47-9.24-10-13.74a6.07 6.07 0 0 1 0.68-4.81 3.07 3.07 0 0 1 3.89-0.28 9 9 0 0 1 2.69 3.24 9.34 9.34 0 0 1 1.73-4 3.22 3.22 0 0 1 4-0.87c1.22 0.8 1.84 3.22 1.71 4.67-0.51 5.66-4.64 10.07-4.7 15.79zM342 577.15c-4.22 2.12-11.63 4.48-16.33 4.11a6.11 6.11 0 0 1-4.21-2.56 3.22 3.22 0 0 1 1.14-3.84 8.52 8.52 0 0 1 4-1.29 10 10 0 0 1-3.11-3.26c-0.67-1.38-0.56-3.3 0.64-4.16s3.64-0.5 4.94 0.2c5.01 2.77 7.6 8.48 12.93 10.8zM342.61 577.05c1 4.63 1.56 12.43 0.16 17a6.09 6.09 0 0 1-3.34 3.53 3.08 3.08 0 0 1-3.34-2 9 9 0 0 1-0.31-4.2 9.31 9.31 0 0 1-3.75 2.28 3.22 3.22 0 0 1-3.75-1.59c-0.53-1.35 0.36-3.68 1.31-4.79 3.73-4.38 9.66-5.6 13.02-10.23zM343.74 576.72c4.61 1.12 11.86 4.09 15.3 7.35a6.09 6.09 0 0 1 1.7 4.56 3.06 3.06 0 0 1-3.29 2.09 9 9 0 0 1-3.91-1.57 9.33 9.33 0 0 1 0.4 4.37 3.22 3.22 0 0 1-3.09 2.65c-1.45-0.13-3.15-1.95-3.72-3.29-2.25-5.26-0.72-11.11-3.39-16.16z" fill="#F26140" p-id="2148"></path><path d="M192.108455 415.186105a17.83 26.04 65.32 1 0 47.322699-21.745999 17.83 26.04 65.32 1 0-47.322699 21.745999Z" fill="#F26140" p-id="2149"></path><path d="M708.81496 399.564899a26.04 17.83 12.44 1 0 7.681774-34.822779 26.04 17.83 12.44 1 0-7.681774 34.822779Z" fill="#F26140" p-id="2150"></path><path d="M438 633.11a225.46 225.14 0 1 0 450.92 0 225.46 225.14 0 1 0-450.92 0Z" fill="#F26140" p-id="2151"></path><path d="M307.72 144.45a28.2 28.2 0 0 1 7.29 1.07 138.75 138.75 0 0 1 34 14.61c5.06 3 9.75 6.5 14.62 9.79s9.26 5.1 14.88 5.1h1.37c6.13-0.33 12.21-1.86 18.27-2.77s12.42-1.71 18.66-2.33q20.4-2 41-2a461.8 461.8 0 0 1 106.39 12.71 298.71 298.71 0 0 1 38.93-19.74q9.29-3.89 18.81-7.13 5.13-1.74 10.33-3.29c2.69-0.8 5.66-2 8.52-2h0.13c6.91 0.09 9.32 8.43 11.6 13.63a170.43 170.43 0 0 1 6.88 18.41 167.13 167.13 0 0 1 5 75.1 110.18 110.18 0 0 1 12.87 31.29 173.49 173.49 0 0 1 5 37.75 45.09 45.09 0 0 1 8.95-6.67 50.92 50.92 0 0 1 25-6.36 59.66 59.66 0 0 1 38.57 14.51c9 7.81 13.89 18.44 15.41 30.14 1.68 12.84-1 25.63-4.23 38-3 11.44-6 22.8-8.09 34.41 82.53 38.05 137.09 124.09 130.44 220-8.23 118.76-107.25 209.61-224.68 209.61-5.23 0-10.51-0.18-15.8-0.55A224.68 224.68 0 0 1 515.46 803a459.77 459.77 0 0 1-63.67 7.46q-8 0.36-16.11 0.36c-44.92 0-90.25-8.57-130.13-29.69a239 239 0 0 1-92.62-88 216.25 216.25 0 0 1-24.47-59c-5.67-23-6.49-46.46-5.05-70.07 1.58-26 5.26-52.09 2.73-78.13a114.18 114.18 0 0 0-9.23-36.14C172 438.88 165.62 428.8 160.59 418s-8.83-22.29-8.08-34.22a58 58 0 0 1 12.07-31.43c14-18.25 36.64-26.86 59.17-26.86 1.05 0 2.11 0 3.17 0.05a111.73 111.73 0 0 1 5-24.19c7-21.31 19.43-40.73 34.32-57.44a275.65 275.65 0 0 1 21.95-81.7c2.24-5 4.5-10.49 8.85-14.09a16.21 16.21 0 0 1 10.67-3.7m0-27.59a43.74 43.74 0 0 0-28.26 10c-9.15 7.57-13.37 17.11-16.16 23.43l-0.32 0.72a302.88 302.88 0 0 0-23.08 81.24c-15.74 19.08-27.22 39.38-34.17 60.44-0.76 2.29-1.46 4.61-2.09 7a107.56 107.56 0 0 0-23.63 7.13 94 94 0 0 0-37.31 28.82A85.09 85.09 0 0 0 125 382.08c-1.24 19.67 5.46 36.61 10.61 47.63 2.77 5.93 5.74 11.4 8.62 16.69s5.43 10 7.58 14.72a86.38 86.38 0 0 1 6.89 27.38c1.66 17 0.21 34.78-1.31 53.57-0.54 6.58-1.09 13.39-1.5 20.22-1.83 29.94 0 54.83 5.8 78.34a243.11 243.11 0 0 0 27.57 66.58 266.38 266.38 0 0 0 103.4 98.26c41.23 21.83 89.35 32.9 143 32.9 5.71 0 11.55-0.13 17.34-0.39a482.23 482.23 0 0 0 54.68-5.67A252.18 252.18 0 0 0 646 885.24c5.87 0.4 11.83 0.61 17.7 0.61a252.76 252.76 0 0 0 125.75-472c1-4.09 2.11-8.27 3.26-12.62 3.91-14.82 7.22-31 4.91-48.62-2.5-19.18-11-35.57-24.7-47.41a87.73 87.73 0 0 0-56.65-21.2 80.44 80.44 0 0 0-11.1 0.76c-0.35-1.56-0.72-3.12-1.11-4.65a144 144 0 0 0-11.06-30 195.38 195.38 0 0 0-7.2-77.71 200.14 200.14 0 0 0-8-21.4c-0.21-0.48-0.42-1-0.63-1.52a60.27 60.27 0 0 0-7.29-13.65c-7.09-9.51-17.24-14.84-28.59-15h-0.5a48.1 48.1 0 0 0-15.26 2.8l-1.15 0.37c-3.78 1.13-7.58 2.34-11.31 3.61-6.88 2.34-13.8 5-20.59 7.8a328 328 0 0 0-32.74 15.9 485.91 485.91 0 0 0-101.93-11c-14.71 0-29.42 0.72-43.73 2.14a413.6 413.6 0 0 0-20 2.5c-2.51 0.38-4.83 0.81-7.07 1.22-2.74 0.5-5.35 1-7.47 1.2l-0.46-0.31c-1.35-0.91-2.72-1.86-4.17-2.87-3.5-2.44-7.46-5.19-11.82-7.78a165.71 165.71 0 0 0-40.84-17.5 55.62 55.62 0 0 0-14.51-2z" fill="#3B3E44" p-id="2152"></path></svg>
        <span>视频列表</span>
      </div>
      <!--视频列表-->
      <div class="home-main">
        <video-list ref="child"></video-list>
        <div class="more">
          <a-button shape="circle" icon="plus" @click="getMore()"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCarousel } from "@/api/carousel.js";
import HeaderBar from "@/components/HeaderBar.vue";
import Recommend from "@/components/Recommend.vue";
import VideoList from "@/components/VideoList.vue";
export default {
  data() {
    return {
      carousel: [],
    };
  },
  methods: {
    _getCarousel() {
      getCarousel().then((res) => {
        if (res.data.code === 2000) {
          this.carousel = res.data.data.carousels;
        }
      });
    },
    go(url) {
      if (url) {
        window.open(url, "_blank");
      }
    },
    getMore(){
      this.$refs.child.getMore();
    }
  },
  created() {
    this._getCarousel();
  },
  components: {
    "header-bar": HeaderBar,
    "recommend": Recommend,
    "video-list": VideoList,
  },
};
</script>

<style>
.home {
  height: 100%;
  width: 100%;
  top: 0;
  bottom:0;
  position:fixed;
  overflow-y:scroll;
  background: #e9e9e9;
}

.home-box{
  width: 80%;
  min-width: 1200px;
  background-color: #fff;
  margin: 10px auto;
}

.home-top{
  display: flex;
  height: 280px;
}

.home-top-left{
  margin: 10px 5px;
  width: 40%;
  min-width: 500px;
}

.home-top-right{
  width: calc(60% - 20px);
  min-width: 680px;
  padding-left: 10px;
}

.carousel-img{
  height: 260px;
  width: 100%;
}

.transition{
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.transition>svg{
  width: 50px;
  height: 50px;
}

.transition>span{
  font-size: 18px;
}

.more {
  text-align: center;
  padding-bottom: 10px;
}

</style>

